// @ts-nocheck
import React, { useState, useEffect } from "react";
import { Card, Table,Button ,Modal ,Form,Input,Upload} from "antd";
import { PlusOutlined,UploadOutlined,LoadingOutlined} from "@ant-design/icons";
import { reqGetTrademark,reqGetAddTrademark } from "@/api/cmn/dict";

// import "./index.less";



function Classify() {
// 	"logoUrl": "string",
//   "tmName": "string"
	const [logoUrl,setLogoUrl]=useState("")
	const [tmName,settmName]=useState("")
	const [form] = Form.useForm();
	const [trademarklist,setTrademarklist] = useState([])
	const[page,setPage]=useState(1);
	const[limit,setLimit]=useState(3);
	//模态框的展示和隐藏
	const [isModalOpen, setIsModalOpen] = useState(false);
	useEffect(() => {
		getTrademark(page,limit)
	
		// setTrademarklist(res)
		// console.log(setTrademarklist)
	  }, []) 

	    // 封装公共请求函数
  const getTrademark = async(page=1,limit=3) => {
    // 发送请求开启loading
    // setLoading(true);
    // 读取表单数据
    // const { hosname, hoscode } = form.getFieldsValue();
    // 发送请求携带上另外的参数
    const res = await reqGetTrademark(page,limit)
	

	setTrademarklist(res.records)
	console.log(res.records)
	// .then(
	// 	data=>{
	// 		console.log(data)
	// 		return data.records
	// 	}
	// );
    // setTrademarklist(a.data.records);
    // 更新页码
	// console.log('@@@@@@@@@@@@@@@@@@@',res);
	// setPage(page);
	// setLimit(limit);
    // 更新总数
    // setTotal(res.total);
    // // 更新数据
    // setHospitalList(res.records);
    // 请求完成结束loading
    // setLoading(false);
  };

  	// const onclick =()=>{
	// 	getTrademark(page,limit)
	// }
	const columns = [
		{
		  title: '序号',
		  dataIndex: 'id',
		  render: text => <a>{text}</a>,
		},
		{
		  title: '品牌名称',
		  className: 'tmName',
		  dataIndex: 'tmName',
		//   align: 'right',
		  width: 200,
		},
		{
		  title: '品牌LOGO',
		  dataIndex: 'logoUrl',
		  render: text => <img style={{width:"100px",height:"80px"}} src={text}/>,
		},
		{
			title: 'Action',
			key: 'operation',
			// fixed: 'right',
			width: 200,
			render: (row) => {
			return(
				<>
				<Button type="default" size="middle"  style={{marginRight:"10px",backgroundColor:"#E6A23C"}}>
				修改
				</Button>
		
				<Button type="primary" size="middle" danger>
				删除
				</Button>
		  		</>
		  )
		},
		  },
	  ];
	
	  const data = trademarklist
	 //模态框
	 const showModal = () => {
		setIsModalOpen(true);
	  };
	
	  const handleOk = () => {
		setIsModalOpen(false);
		console.log(tmName,imageUrl)
		const form = {"tmName":tmName,"logoUrl":imageUrl }
			console.log(form)
			reqGetAddTrademark(form)
	  };
	
	  const handleCancel = () => {
		setIsModalOpen(false);
	  }; 
	//表单验证
	const onFinish = (values: any) => {
		console.log('Success:', values);
	  };
	
	  const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	  };
	  //上传图片数据
	  const beforeUpload = (file: RcFile) => {
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		if (!isJpgOrPng) {
		  message.error('You can only upload JPG/PNG file!');
		}
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isLt2M) {
		  message.error('Image must smaller than 2MB!');
		}
		return isJpgOrPng && isLt2M;
	  };
	  
	  
		const [loading, setLoading] = useState(false);
		const [imageUrl, setImageUrl] = useState<string>();
	  
		const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
			if (info.file.status === 'uploading') {
			  setLoading(true);
			  return;
			}
			if (info.file.status === 'done') {
			  // Get this url from response in real world.
			  setLoading(false);
				setImageUrl(info.file.response.data);
				console.log("123",info.file.response.data)
			}
			
		  };
	  
		const uploadButton = (
		  <div>
			{loading ? <LoadingOutlined /> : <PlusOutlined />}
			<div style={{ marginTop: 8 }}>Upload</div>
		  </div>
		);
		//表单确定逻辑
		const updataWangwangwang = (changedValues, allValues)=>{
			// console.log( allValues)
			// console.log( )
			
			const tmName = allValues["品牌名称"]
			const logoUrl =allValues["品牌LOGO"].file.name
			console.log(allValues)
			console.log(tmName)
			
			settmName(tmName)
			setImageUrl(imageUrl)
			
		}
	return (
		<Card size="default" title="品牌管理" extra={<a href="#">哈哈 把你撑大</a>} style={{ width: 1000 }}>
		 <Button type="primary" icon=<PlusOutlined /> onClick={showModal}>
          添加
        </Button>
		  <Modal title="Basic Modal" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
		 <Form
		 labelAlign="left"
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
	  onValuesChange={updataWangwangwang}
    >
      <Form.Item
        label="品牌名称"
        name="品牌名称"
        rules={[{ required: true, message: 'Please input your trademark!' }]}
      >
        <Input type="text"/>
      </Form.Item>
	  <Form.Item
        name="品牌LOGO"
        label="品牌LOGO"
        // valuePropName="fileList"
        // getValueFromEvent={normFile}
        // extra="longgggggggggggggggggggggggggggggggggg"
      >
	      <Upload
              name="file"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action="/dev-api/admin/product/upload"
              beforeUpload={beforeUpload}
              onChange={handleChange}
              
            >
              {imageUrl ? <img src={imageUrl} alt="file" style={{ width: '100%' }} /> : uploadButton}
            </Upload>
        {/* <Upload name="logo" action="/upload.do" listType="picture">
          <Button icon={<UploadOutlined />}>Click to upload</Button>
        </Upload> */}
      </Form.Item>
	  </Form>
		</Modal>
	  <Table
		columns={columns}
		dataSource={trademarklist}
		bordered
		title={() => 'Header'}
		footer={() => 'Footer'}
		/>
		{/* <button onClick={onclick}></button> */}
	  </Card>
	);
}

export default Classify;
